{% extends "base.html" %}

{% block extra_css %}
<style>
/* 调整日期输入框的样式 */
input[type="date"] {
    font-size: 12px;
    padding: 2px 4px;
    height: 31px;
}
.input-group-text {
    font-size: 12px;
    padding: 2px 8px;
}
.input-group {
    flex-wrap: nowrap;
}
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h2>合同列表</h2>
    </div>
    <div class="col text-end">
        <a href="{{ url_for('new_contract') }}" class="btn btn-primary">
            <i class="fas fa-plus-circle"></i> 新建合同
        </a>
    </div>
</div>

<!-- 筛选表单 -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">日期范围</label>
                <div class="input-group">
                    <input type="date" class="form-control" name="date_from">
                    <span class="input-group-text">至</span>
                    <input type="date" class="form-control" name="date_to">
                </div>
            </div>
            <div class="col-md-2">
                <label class="form-label">供应商</label>
                <input type="text" class="form-control" name="company" placeholder="输入供应商名称">
            </div>
            <div class="col-md-2">
                <label class="form-label">类别</label>
                <select class="form-select" name="cate">
                    <option value="">全部</option>
                    <option value="对公">对公</option>
                    <option value="对私">对私</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label">供应物品</label>
                <input type="text" class="form-control" name="item_type" placeholder="输入物品类型">
            </div>
            <div class="col-md-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> 搜索
                </button>
                <a href="{{ url_for('index') }}" class="btn btn-secondary ms-2">
                    <i class="fas fa-times-circle"></i> 重置
                </a>
            </div>
        </form>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>编号</th>
                <th>项目名称</th>
                <th>我方公司</th>
                <th>供应商</th>
                <th>供应物品</th>
                <th>负责人</th>
                <th>金额</th>
                <th>日期</th>
                <th>类别</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for contract in contracts %}
            <tr>
                <td>{{ contract.unique_id }}</td>
                <td>{{ contract.pro_name }}</td>
                <td>{{ contract.my_comma }}</td>
                <td>{{ contract.ven_name }}</td>
                <td>{{ contract.item_sup }}</td>
                <td>{{ contract.people }}</td>
                <td>{{ "%.2f"|format(contract.money) }}</td>
                <td>{{ contract.date }}</td>
                <td>{{ contract.cate }}</td>
                <td>
                    {% if contract.status == '待审批' %}
                    <span class="badge bg-warning">待审批</span>
                    {% elif contract.status == '已通过' %}
                    <span class="badge bg-success">已通过</span>
                    {% elif contract.status == '已拒绝' %}
                    <span class="badge bg-danger">已拒绝</span>
                    {% elif contract.status == 'deleted' %}
                    <span class="badge bg-secondary">已删除</span>
                    {% endif %}
                </td>
                <td>
                    <div class="btn-group">
                        <a href="{{ url_for('view_contract', id=contract.id) }}" class="btn btn-sm btn-info">
                            <i class="fas fa-eye"></i> 查看
                        </a>
                        {% if contract.status != 'deleted' %}
                        <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ contract.id }}">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                        {% endif %}
                    </div>

                    <!-- 删除确认对话框 -->
                    <div class="modal fade" id="deleteModal{{ contract.id }}" tabindex="-1">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">确认删除</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    确定要删除合同 "{{ contract.pro_name }}" 吗？
                                    <br>
                                    <small class="text-muted">删除后的合同将移至回收站</small>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <form action="{{ url_for('delete_contract', id=contract.id) }}" method="post" style="display: inline;">
                                        <button type="submit" class="btn btn-danger">确认删除</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %} 